<template>
	<view class="index_store">
		<view class="index_search">
			<uni-icons  class="chat" type="location-filled" color="red" size="20" @click="openMap"></uni-icons>
			<text class="area" @click="openMap">岳阳市</text>
			<uni-icons  class="arrowdown" type="arrowdown" size="14" @click="openMap"></uni-icons>
			<input @click="$nav('/pages/search/index')" class="uni-input" placeholder-class="qwicon qwicon_search"  placeholder="  快来搜索喜欢的店铺..." icon="scan" />
		</view>
		
		<view class="store_where">
			<uni-grid :column="4" :show-border="false"  :square="false" :highlight="false">
				<uni-grid-item class="grid_item">
				    <view class="item" @click="sortClick('distance')">
				    	<text class="text">距离</text>
						<view class="sort">
							<view class="sort_asc"><uni-icons type="arrowup" :size="12" :color="(where.sort_type=='distance' && where.sort_order=='asc')?'#ff0000':''" /></view>
							<view class="sort_desc"><uni-icons type="arrowdown" :size="12" :color="(where.sort_type=='distance' && where.sort_order=='desc')?'#ff0000':''" /></view>
						</view>
				    </view>
				</uni-grid-item>
				<uni-grid-item class="grid_item">
				    <view class="item" @click="sortClick('sale')">
				    	<text class="text">销售</text>
						<view class="sort">
							<view class="sort_asc"><uni-icons type="arrowup" :size="12" :color="(where.sort_type=='sale' && where.sort_order=='asc')?'#ff0000':''" /></view>
							<view class="sort_desc"><uni-icons type="arrowdown" :size="12" :color="(where.sort_type=='sale' && where.sort_order=='desc')?'#ff0000':''" /></view>
						</view>
				    </view>
				</uni-grid-item>
				<uni-grid-item class="grid_item">
				    <view class="item" @click="sortClick('comment')">
				    	<text class="text">评论</text>
						<view class="sort">
							<view class="sort_asc"><uni-icons type="arrowup" :size="12" :color="(where.sort_type=='comment' && where.sort_order=='asc')?'#ff0000':''" /></view>
							<view class="sort_desc"><uni-icons type="arrowdown" :size="12" :color="(where.sort_type=='comment' && where.sort_order=='desc')?'#ff0000':''" /></view>
						</view>
				    </view>
				</uni-grid-item>
				<uni-grid-item class="grid_item">
				    <view class="item" @click="sortClick('fav')">
				    	<text class="text">收藏</text>
						<view class="sort">
							<view class="sort_asc"><uni-icons type="arrowup" :size="12" :color="(where.sort_type=='fav' && where.sort_order=='asc')?'#ff0000':''" /></view>
							<view class="sort_desc"><uni-icons type="arrowdown" :size="12" :color="(where.sort_type=='fav' && where.sort_order=='desc')?'#ff0000':''" /></view>
						</view>
				    </view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<view class="store_list">
			<mescroll-body ref="mescrollRef" @up="upCallback" :down="downOption">
				<template v-if="list.length>0">
					<view class="store_item" v-for="(v,k) in list" :key="k" @click="$nav('/pages/store/index?id='+v.id)">
						<view class="store_logo"><image :src="v.store_logo||''" mode="aspectFit" /></view>
						<view class="store_info">
							<view class="title">
								<text class="store_name">{{v.store_name||'加载中...'}}</text>
								<text>距离 {{v.distance}}</text>
							</view>
							<view class="rate">
								<view class="title_before">综合评分：</view>
								<view><sx-rate :value="v.comment_rate/20" :disabled="true" fontSize="14px" containerClass="sxrate" /> </view>
							</view>
							<view class="address">
								<view class="title_before" title="">店铺地址：{{v.area_info+' '+v.store_address}}</view>
							</view>
							<!-- <view class="distance">
								<text>103.00</text>
								<text>km</text>
							</view> -->
						</view>
					</view>
				</template>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import sxRate from "@/components/sx-rate/index.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {uniGrid,uniGridItem,uniIcons,sxRate},
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					lat:'',
					lng:'',
				},
				downOption:{
					use:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				where:{
					sort_type:'distance',
					sort_order:'desc',
				},
				list:[],
			};
		},
		onLoad() {
			this.getLocal();
		},
		methods:{
			openMap(){
				let _this = this;
				uni.chooseLocation({
					success(res) {
						_this.params.lat = res.latitude;
						_this.params.lng = res.longitude;
					}
				})
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let baseObj = JSON.stringify(this.where);
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				
				this.params.params = basecode 
				this.$http(this.$api.getStores,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			sortClick(e){
				if(e==this.where.sort_type){
					if(this.where.sort_order == 'asc'){
						this.where.sort_order = 'desc'
					}else{
						this.where.sort_order = 'asc'
					}
				}else{
					this.where.sort_order = 'desc'
				}
				this.where.sort_type = e;
				this.mescroll.resetUpScroll();
			},
			getLocal(){
				uni.getLocation({
				    type: 'wgs84 ',
				    success: (res)=> {
				        console.log(res);
						this.params.lat = res.latitude
						this.params.lng = res.longitude
				        console.log('经度：' + res.longitude);
				        console.log('纬度：' + res.latitude);
				    }
				});

			}
			
		}
	}
</script>

<style lang="scss">
.index_store{
	.store_list{
		.store_item{
			margin-bottom: 20rpx;
			background: #fff;
			width: 100%;
			min-height:150rpx ;
			border-radius: 10rpx;
			padding: 30rpx;
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			.store_info{
				float: left;
				position: relative;
				// .distance{
				// 	position: absolute;
				// 	top:8rpx;
				// 	font-size: $uni-font-size-sm;
				// 	color:$uni-color-error;
				// 	right: 8rpx;
				// 	text:last-child{margin-left: 5rpx;}
				// }
				.sxrate{line-height: 14px;height: 14px;}
				.title_before{max-width: 500rpx;font-size: $uni-font-size-sm;color:#999;height: 45rpx;line-height: 45rpx;overflow: hidden; white-space: nowrap;text-overflow:ellipsis;}
				.rate{display:inline-flex;}
				.title{margin-bottom: 10rpx;&:after{content:'';clear: both;display: block;}.store_name{max-width: 300rpx;overflow: hidden;display: block;float: left;white-space: nowrap;text-overflow:ellipsis;}}
				.title text:nth-child(2){float: left;font-size: $uni-font-size-sm;background: $uni-color-error;color:#fff;border-radius: 8rpx;padding:0 20rpx;margin-left: 20rpx;margin-top: 6rpx;}
			}
			.store_logo{
				margin-right: 20rpx;
				border-radius: 10rpx;
				width: 150rpx;
				height: 150rpx;
				float: left;
				background: #f4f4f4;
				image{width: 100%;height: 150rpx;border-radius: 10rpx;}
			}
		}
		padding-top: 20rpx;
		// padding: 30rpx;
	}
	.store_where{
		background-color: #fff;
		border-top: 1px solid #f1f1f1;
		text-align: center;
		font-size: $uni-font-size-base;
		line-height: 80rpx;
		.item{
			width: 98rpx;
			margin:0 auto;
			.text{float: left;margin-right: 10rpx;}
			.sort{float: left;line-height: 16rpx;padding-top: 24rpx;}
			border-bottom: 2px solid #fff;padding:0 20rpx;display: inline-block;
			&.ck{border-bottom-color: $uni-color-error;}
			&:after{content:'';display: block;clear: both;}
		}
	}
	.index_search{
		display: flex;
		padding-top: calc(var(--status-bar-height) + 30rpx);
		padding-bottom: 30rpx;
		background: #fff;
		.chat{
			flex: 0 1 30rpx;
			line-height: 70rpx;
			margin-left: 30rpx;
			cursor: pointer;
		}
		.arrowdown{
			cursor: pointer;
			line-height: 70rpx;
		}
		.area{
			cursor: pointer;
			line-height: 70rpx;
			margin-left: 10rpx;
			margin-right: 20rpx;
			font-size: $uni-font-size-base;
		}
		.uni-input{
			flex: 1;
			border:1px solid #f1f1f1;
			background: #f8f8f8;
			border-radius: 25rpx;
			padding: 12rpx 0;
			font-size: $uni-font-size-base;
			text-align: center;
			margin:0 30rpx
		}
	}
}

</style>
